import React,{useState,useEffect,useLayoutEffect} from 'react'
import { Button, Table,Modal } from 'antd';
import '../Wofaqideshenpi.less'
import Myfrom from '../Myfrom';
import Myaction from '../Myaction';
import BanZuFuKuanBianJi from '../bianji/banzufukuansenqinBianJi'

export default function Banzufukuanshenqing() {

  const [VisibleTable,setVisibleTable] =useState(true);
  const Visible=()=>{
      if(VisibleTable){
        setVisibleTable(false)
      }else{
        setVisibleTable(true)
      }
    }

  //表格的列项
  const columns = [
    {
      title: '序号',
      dataIndex: 'key',
      align:'center',
      key: 'key',
    },
    {
      title: '标题',
      dataIndex: 'age',
      align:'center',
      key: 'age',
    },
    {
      title: '拟付款日期',
      dataIndex: 'address',
      align:'center',
      key: '1',
    },
    {
      title: '付款金额',
      dataIndex: 'address',
      align:'center',
      key: '2',
    },
    {
      title: '所属项目',
      dataIndex: 'address',
      align:'center',
      key: '3',
    },
    {
      title: '关联合同',
      dataIndex: 'address',
      align:'center',
      key: '4',
    },
    {
      title: '是否紧急',
      dataIndex: 'address',
      align:'center',
      key: '5',
    },
    {
      title: '申请人',
      dataIndex: 'address',
      align:'center',
      key: '6',
    },
    {
      title: '提交时间',
      dataIndex: 'address',
      align:'center',
      key: '7',
    },
    {
      title: '状态',
      dataIndex: 'state',
      align:'center',
      key: 'state',
    },
    {
      title: '操作',
      // key: 'operation',
      align:'center',
      dataIndex: 'action',
      fixed: 'right',
      width: 200,
      render: text=> <div>{text}</div>
    },
  ];
  //后端请求的初始数据
  const [data,setData] = useState([
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York Park',
      state:'草稿'
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 40,
      address: 'London Park',
      state:'草稿'
    },
    {
      key: '3',
      name: 'Jim Green',
      age: 40,
      address: 'London Park',
      state:'审核通过'
    },
    {
      key: '4',
      name: 'Jim Green',
      age: 40,
      address: 'London Park',
      state:'审核拒绝'
    },
    {
      key: '5',
      name: 'Jim Green',
      age: 40,
      address: 'London Park',
      state:'待审核'
    }
  ]);
  //处理后的数据
  const [arr,setArr] = useState([])
  //存储每条数据的id
  const [dataId,setDataId] = useState('')
  //控制模态框的显示隐藏
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isDelModalVisible, setIsDelModalVisible] = useState(false);
  //提交模态框显示的处理事件
  const showModal = (id) => {
    setDataId(id)
    setIsModalVisible(true);
  };
  //点击模态框确认的处理事件
  const handleOk = () => {
    let newdata = []
    newdata = data.map(item=>{
      if(item.key===dataId){
        item.state='待审核'
      }
      return item
    })
    setData(newdata)
    setIsModalVisible(false);
  };
  //取消模态框
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  //删除模态框显示的处理事件
  const delshowModal = (id) => {
    setDataId(id)
    setIsDelModalVisible(true);
  };
  //点击删除模态框确认的处理事件
  const delhandleOk = () => {
    setIsDelModalVisible(false);
  };
  //取消删除模态框
  const delhandleCancel = () => {
    setIsDelModalVisible(false);
  };
  //组件加载请求数据，处理数据
  useLayoutEffect(()=>{
    let myarr = []
    myarr = data.map(item=>{
      let obj = {
        key:item.key,
        name:item.name,
        age:item.age,
        address:item.address,
        state:item.state,
        action:<Myaction fun={Visible} state={item.state} id={item.key} showModal={showModal} delshowModal={delshowModal}/>
      }
      return obj
    })
    setArr(myarr)
  },[data])
  //获取表单数据
    const getfromdata = (data)=>{
        console.log(data);
    }
    return (
      <>
      {VisibleTable?
      <div className='content'>
            <Myfrom getdata={getfromdata} contract='true' label='拟付款日期' state='true'/>
            <div className='table'>
                <div className='new'><Button type='primary' size='large'>新增班组付款申请</Button></div>
                <Table
                    columns={columns}
                    dataSource={arr}
                    scroll={{
                        x: 1300,
                    }}
                />
            </div>
            <Modal title="确认提交" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} centered okText="确认" cancelText='取消'>
              <h2 className='ifDel'>是否继续提交材料采购付款申请</h2>
              <p className='del'>提交后将不可撤回</p>
            </Modal>
            <Modal title="确认删除" visible={isDelModalVisible} onOk={delhandleOk} onCancel={delhandleCancel} okText="确认" cancelText='取消'>
              <h2 className='ifDel'>是否确认删除该岗位</h2>
              <p className='del'>删除后将不可恢复</p>
            </Modal>
        </div>:<>
                <BanZuFuKuanBianJi visibles={[VisibleTable,setVisibleTable]}/>
              </>}
        </>
    )
}
